<template>
  <div v-if="props.type === 'title'" class="form-group_title">
    <SnippetsOutlined class="form-group_title_icon" />
    {{ props.label }}
  </div>
  <a-form-item
    v-else-if="props.type === 'select'"
    :label="props.label"
    :name="props.name"
  >
    <a-select
      :name="props.name"
      :disabled="props.disabled"
      :value="currentValue"
      show-search
      placeholder="请选择"
      :options="props.option"
      :fieldNames="props.fieldNames"
      :filter-option="props.filterOption"
      @change="updateValue"
      :getPopupContainer="(trigger: any) => trigger.parentElement"
    >
    </a-select>
  </a-form-item>
  <a-form-item
    v-else-if="props.type === 'multi-select'"
    :label="props.label"
    :name="props.name"
  >
    <a-select
      :value="props.modelValue"
      :name="props.name"
      :disabled="props.disabled"
      show-search
      :show-arrow="true"
      mode="multiple"
      placeholder="请选择"
      :options="props.option"
      :field-names="props.fieldNames"
      :filter-option="props.filterOption"
      :get-popup-container="(trigger: any) => trigger.parentElement"
      @select="updateValue"
    />
  </a-form-item>
  <a-form-item
    v-else-if="props.type === 'dict-select'"
    :label="props.label"
    :name="props.name"
  >
    <MDictSelect
      :name="props.name"
      :value="props.modelValue"
      :disabled="props.disabled"
      :dictCode="props.dictCode"
      @select="updateValue"
    ></MDictSelect>
  </a-form-item>
  <a-form-item
    v-else-if="props.type === 'date'"
    :label="props.label"
    :name="props.name"
  >
    <a-date-picker
      :name="props.name"
      :disabled="props.disabled"
      :disabledDate="props.laterDisabled ? disabledDate : null"
      format="YYYY-MM-DD"
      valueFormat="YYYY-MM-DD"
      :value="currentValue"
      @change="updateValue"
      :getPopupContainer="(trigger: any) => trigger.parentElement"
    >
    </a-date-picker>
  </a-form-item>
  <a-form-item
    v-if="props.type === 'year'"
    :label="props.label"
    :name="props.name"
  >
    <a-date-picker
      :value="props.modelValue"
      :name="props.name"
      value-format="YYYY"
      @change="updateValue"
      picker="year"
      :get-popup-container="(trigger: any) => trigger.parentElement"
    />
  </a-form-item>
  <a-form-item
    v-else-if="props.type === 'time'"
    :label="props.label"
    :name="props.name"
  >
    <a-date-picker
      :name="props.name"
      show-time
      format="YYYY-MM-DD HH:mm:ss"
      valueFormat="YYYY-MM-DD HH:mm:ss"
      :value="props.modelValue"
      @change="updateValue"
      :getPopupContainer="(trigger: any) => trigger.parentElement"
    >
    </a-date-picker>
  </a-form-item>
  <a-form-item
    v-else-if="props.type === 'input'"
    :label="props.label"
    :name="props.name"
  >
    <a-input
      :name="props.name"
      :disabled="props.disabled"
      :value="currentValue"
      @change="updateValue"
      placeholder="请输入"
      :maxlength="props.maxlength"
    >
    </a-input>
  </a-form-item>
  <a-form-item
    v-else-if="props.type === 'input-number'"
    :label="props.label"
    :name="props.name"
  >
    <a-input-number
      :disabled="props.disabled"
      :value="currentValue"
      :controls="false"
      placeholder="请输入"
      @change="updateValue"
      :formatter="limitDecimals"
      :min="props.min"
      :max="99999999.999999"
      :precision="props.precision"
      string-mode
    >
      <template v-if="props.unit" #addonAfter>{{ props.unit }}</template>
    </a-input-number>
  </a-form-item>
  <template v-else-if="props.type === 'slot'">
    <slot :name="props.name"></slot>
  </template>
</template>

<script lang="ts" setup>
import dayjs, { Dayjs } from 'dayjs'
import { SnippetsOutlined } from '@ant-design/icons-vue'
import { limitDecimals } from '@/hooks'
import { ref, watchEffect } from 'vue'

interface FormItemProps {
  modelValue?: any
  type: string
  disabled?: boolean
  label: string
  name: any
  nextCall?: any // type为select时使用,定义联动的下级name
  option?: any[] // type为select时使用,定义select选项
  fieldNames?: { label: string; value: string } // type为select时使用,定义fieldName
  filterOption?: any // type为select时使用,定义模糊匹配
  unit?: string //  type为input-number时使用,定义数字单位
  precision?: number // type为input-number时使用,定义数字位数
  dictCode?: string // type为dict时使用,定义字典code
  maxlength?: number // 输入框长度限制
  min?: number // 数字输入框最小值限制
  laterDisabled?: boolean // type为date时使用,定义是否可以选择当前日期之后的日期
}
const props = defineProps<FormItemProps>()
// todo
// eslint-disable-next-line vue/no-setup-props-destructure
const currentValue = ref(props.modelValue)

watchEffect(() => {
  currentValue.value = props.modelValue
})

const emit = defineEmits(['update:modelValue', 'select'])

function updateValue(e: any): void {
  const value = e && e.currentTarget ? e.currentTarget.value : e // 为普通input框进行特别判断
  currentValue.value = value
  emit('update:modelValue', value)
  emit('select', {
    name: props.name,
    value,
    nextCall: props.nextCall,
    option: props.option,
    type: props.type,
    dictCode: props.dictCode,
  })
}

const disabledDate = (current: Dayjs): boolean => {
  return current && current > dayjs().endOf('day')
}
</script>

<style lang="less"></style>
